
<template>
  <header class="header">
    <!-- 左侧插槽 -->
    <div class="header__left">
      <slot name="left" />
    </div>

    <!-- 中间导航菜单 -->
    <slot name="center">
      <el-menu 
        :default-active="activeIndex" 
        class="header__menu" 
        mode="horizontal" 
        active-text-color="#4285f4"
      >
        <el-menu-item 
          v-for="(item, index) in menus" 
          :key="index" 
          :index="item.route"
          @click="handleSelect(item)"
        >
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </slot>

    <!-- 右侧插槽 -->
    <div class="header__right">
      <slot name="right" />
    </div>
  </header>
</template>

<script>
export default {
  name: "BaseHeader",

  props: {
    menus: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item => 
          typeof item.name === 'string' && 
          typeof item.route === 'string'
        )
      }
    },

    defaultIndex: {
      type: String,
      default: '/homePage'
    }
  },

  data() {
    return {
      activeIndex: this.defaultIndex,
    };
  },

  watch: {
    $route: {
      immediate: true,
      handler(newRoute) {
        this.activeIndex = newRoute.path;
      }
    }
  },

  methods: {
    handleSelect(item) {
      if (this.$route.path !== item.route) {
        this.activeIndex = item.route;
        this.$router.push({ path: item.route });
      }
    }
  },
}
</script>

<style scoped lang="less">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  &__left {
    min-width: fit-content;
  }

  &__menu {
    flex: 1;
  }

  &__right {
    min-width: fit-content;
  }
}
</style>